<template>
  <div class="header">
    <!-- 折叠图片 -->
    <div class="collapse-btn" >
      <i class="el-icon-menu"></i>
    </div>
    <div class="logo">易学易付后台管理系统</div>
    <div class="header-right">
      <div class="btn-fullscreen" @click="handleFullScreen">
        <el-tooltip :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
          <i class="el-icon-rank"></i>
        </el-tooltip>
      </div>
      <div class="user-avator">
        <!--<img src="../assets/img/user.jpg"/>-->
      </div>
      <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                    {{userName}}
                    <i class="el-icon-caret-bottom"></i>
                </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          <el-dropdown-item command="updatePwd">修改密码</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog title="修改管理员" :visible.sync="editVisible" width="400px" center>
      <el-form :model="form" ref="form" label-width="80px" :rules="rules">
        <!--<el-form-item prop="account" label="用户名" size="mini">-->
          <!--<el-input v-model="form.account" placeholder="用户名"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item prop="pwd" label="原密码" size="mini">
        <el-input type="password" v-model="form.pwd" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item prop="pwd1" label="新密码" size="mini">
        <el-input type="password" v-model="form.pwd1" placeholder="密码"></el-input>
        </el-form-item>
        <!--<el-form-item prop="nickName" label="昵称" size="mini">-->
          <!--<el-input v-model="form.nickName" placeholder="昵称"></el-input>-->
        <!--</el-form-item>-->
      </el-form>
      <span slot="footer">
                <el-button size="mini" @click="editVisible = false">取消</el-button>
                <el-button size="mini" @click="editSave" type="primary">确定</el-button>
            </span>
    </el-dialog>

  </div>
</template>

<script>
  // import bus from "../../static/js/bus";
  import {updatePwd,getLoginOut} from '../api/public/api';
  import {mixin} from '../../static/js/index';
  export default {
    mixins: [mixin],
    data(){
      return{
        collapse: false,
        fullscreen:false,
        editVisible:false,
        form:{      //编辑框

          pwd:  "",
          pwd1:"",

        },
        rules: {

          pwd: [
            {required: true,message: '请输入密码',trigger: 'blur'}
          ],
          pwd1: [
            {required: true,message: '请输入新密码',trigger: 'blur'}
          ]

        }
      }
    },
    computed:{
      userName(){
        return localStorage.getItem('userName');
      }
    },
    methods:{
      //登录超时

      //全屏事件
      handleFullScreen(){
        if(this.fullscreen){
          if(document.exitFullscreen){
            document.exitFullscreen();
          }else if(document.webkitCancelFullScreen){      //safari 、Chrome
            document.webkitCancelFullScreen();
          }else if (document.mozCancelFullScreen){        //firefox
            document.mozCancelFullScreen();
          }else if(document.msExitFullScreen){            //ie
            document.msExitFullScreen();
          }
        }else{
          let element = document.documentElement;
          if(element.requestFullscreen){
            element.requestFullscreen();
          }else if(element.webkitRequestFullScreen){      //safari 、Chrome
            element.webkitRequestFullScreen();
          }else if(element.mozRequestFullScreen){         //firefox
            element.mozRequestFullScreen();
          }else if (element.msRequestFullScreen){         //ie
            element.msRequestFullScreen();
          }
        }
        this.fullscreen = !this.fullscreen;
      },
      handleCommand(command){
        if(command == "logout"){
          localStorage.removeItem('userName');
          localStorage.removeItem('level')
          getLoginOut().then(res=>{
            if(res.data.code == 0){
              this.editVisible = false;
              this.notify("退出成功", "success");
            }else{
              this.notify(res.data.msg, "success");
            }
          })
          this.$router.push("/");
        }else {
          this.editVisible=true
          this.form.pwd=""
          this.form.pwd1=""
        }

      },
      //保存编辑页面修改的数据
      editSave(){
        let params ={
          'pwd':this.form.pwd,
          'newPwd':this.form.pwd1

        }

        updatePwd(params).then(res => {
          if(res.data.code == 0){
            this.editVisible = false;
            this.notify("修改成功", "success");
          }else{
            this.notify(res.data.msg, "success");
          }
        })
          .catch(err => {
            console.log(err);
          });


      },
    }
  }
</script>

<style scoped>
  .header{
    position: relative;
    background-color: #253041;
    box-sizing: border-box;
    width: 100%;
    height: 70px;
    font-size: 22px;
    color: #ffffff;
  }

  .collapse-btn{
    float: left;
    padding: 0 21px;
    cursor: pointer;
    line-height: 70px;
  }

  .header .logo{
    float: left;
    line-height: 70px;
  }

  .header-right{
    float: right;
    padding-right: 50px;
    display:flex;
    height: 70px;
    align-items: center;
  }

  .btn-fullscreen{
    transform: rotate(45deg);
    margin-right: 5px;
    font-size: 24px;
  }

  .user-avator{
    margin-left: 20px;
  }

  .user-avator img{
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .user-name{
    margin-left: 10px;
  }

  .el-dropdown-link{
    color: #ffffff;
    cursor: pointer;
  }
</style>
